<template>
  <header class="dashboard-header">
    <h1>Distributed Training Monitor</h1>
    <div class="communication-status" :class="communicationStatus">
      {{ communicationStatusLabel }}
      <span v-if="rebuildingCommGroup" class="rebuilding-indicator">
        (Rebuilding...)
      </span>
    </div>
  </header>
</template>

<script setup>
import { computed } from 'vue'
import { useTrainingStore } from '../stores/training'

const store = useTrainingStore()

const communicationStatusLabel = computed(() => {
  return {
    stable: 'Communication Group: Stable',
    rebuilding: 'Communication Group: Rebuilding'
  }[store.communicationStatus]
})
</script>

<style scoped>
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10;
}

h1 {
  margin: 0;
  font-size: 1.3rem;
  color: #333;
}

.communication-status {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.communication-status.stable {
  background-color: #e6f7ff;
  color: #1890ff;
}

.communication-status.rebuilding {
  background-color: #fff7e6;
  color: #fa8c16;
}

.rebuilding-indicator {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}
</style>